<template>
  <div class="page-container">
    <pf-table
      ref="pfTable"
      v-model="form"
      :columns="columns"
      :form-items="formItems"
      @get-table-data="getTableData"
    >
      <template #orderLabel="{column}">
        <el-tooltip placement="top">
          <p slot="content">订单渠道说明</p>
          <p><span>{{ column.label }}</span> <i class="el-icon-info" /></p>
        </el-tooltip>
      </template>
      <template #handle-area>
        <el-button type="warning">导出</el-button>
      </template>
      <div slot="form-after">表单说明</div>
      <div slot="table-before">表格说明</div>
      <template #handle="{row, $index }">
        <el-button type="text" size="small" @click="gotoDetail(row, $index)">详情</el-button>
      </template>
      <div slot="table-after">表格数据说明</div>
    </pf-table>
  </div>
</template>

<script>

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      brandList: [
        { label: '马牌', value: 1 },
        { label: '普利司通', value: 2 }
      ],
      treeList: [{
        value: 'zhinan',
        label: '指南',
        children: [{
          value: 'shejiyuanze',
          label: '设计原则',
          children: [{
            value: 'yizhi',
            label: '一致'
          }, {
            value: 'fankui',
            label: '反馈'
          }, {
            value: 'xiaolv',
            label: '效率'
          }, {
            value: 'kekong',
            label: '可控'
          }]
        }, {
          value: 'daohang',
          label: '导航',
          children: [{
            value: 'cexiangdaohang',
            label: '侧向导航'
          }, {
            value: 'dingbudaohang',
            label: '顶部导航'
          }]
        }]
      }, {
        value: 'zujian',
        label: '组件',
        children: [{
          value: 'basic',
          label: 'Basic',
          children: [{
            value: 'layout',
            label: 'Layout 布局'
          }, {
            value: 'color',
            label: 'Color 色彩'
          }, {
            value: 'typography',
            label: 'Typography 字体'
          }, {
            value: 'icon',
            label: 'Icon 图标'
          }, {
            value: 'button',
            label: 'Button 按钮'
          }]
        }, {
          value: 'form',
          label: 'Form',
          children: [{
            value: 'radio',
            label: 'Radio 单选框'
          }, {
            value: 'checkbox',
            label: 'Checkbox 多选框'
          }, {
            value: 'input',
            label: 'Input 输入框'
          }, {
            value: 'input-number',
            label: 'InputNumber 计数器'
          }, {
            value: 'select',
            label: 'Select 选择器'
          }, {
            value: 'cascader',
            label: 'Cascader 级联选择器'
          }, {
            value: 'switch',
            label: 'Switch 开关'
          }, {
            value: 'slider',
            label: 'Slider 滑块'
          }, {
            value: 'time-picker',
            label: 'TimePicker 时间选择器'
          }, {
            value: 'date-picker',
            label: 'DatePicker 日期选择器'
          }, {
            value: 'datetime-picker',
            label: 'DateTimePicker 日期时间选择器'
          }, {
            value: 'upload',
            label: 'Upload 上传'
          }, {
            value: 'rate',
            label: 'Rate 评分'
          }, {
            value: 'form',
            label: 'Form 表单'
          }]
        }, {
          value: 'data',
          label: 'Data',
          children: [{
            value: 'table',
            label: 'Table 表格'
          }, {
            value: 'tag',
            label: 'Tag 标签'
          }, {
            value: 'progress',
            label: 'Progress 进度条'
          }, {
            value: 'tree',
            label: 'Tree 树形控件'
          }, {
            value: 'pagination',
            label: 'Pagination 分页'
          }, {
            value: 'badge',
            label: 'Badge 标记'
          }]
        }, {
          value: 'notice',
          label: 'Notice',
          children: [{
            value: 'alert',
            label: 'Alert 警告'
          }, {
            value: 'loading',
            label: 'Loading 加载'
          }, {
            value: 'message',
            label: 'Message 消息提示'
          }, {
            value: 'message-box',
            label: 'MessageBox 弹框'
          }, {
            value: 'notification',
            label: 'Notification 通知'
          }]
        }, {
          value: 'navigation',
          label: 'Navigation',
          children: [{
            value: 'menu',
            label: 'NavMenu 导航菜单'
          }, {
            value: 'tabs',
            label: 'Tabs 标签页'
          }, {
            value: 'breadcrumb',
            label: 'Breadcrumb 面包屑'
          }, {
            value: 'dropdown',
            label: 'Dropdown 下拉菜单'
          }, {
            value: 'steps',
            label: 'Steps 步骤条'
          }]
        }, {
          value: 'others',
          label: 'Others',
          children: [{
            value: 'dialog',
            label: 'Dialog 对话框'
          }, {
            value: 'tooltip',
            label: 'Tooltip 文字提示'
          }, {
            value: 'popover',
            label: 'Popover 弹出框'
          }, {
            value: 'card',
            label: 'Card 卡片'
          }, {
            value: 'carousel',
            label: 'Carousel 走马灯'
          }, {
            value: 'collapse',
            label: 'Collapse 折叠面板'
          }]
        }]
      }, {
        value: 'ziyuan',
        label: '资源',
        children: [{
          value: 'axure',
          label: 'Axure Components'
        }, {
          value: 'sketch',
          label: 'Sketch Templates'
        }, {
          value: 'jiaohu',
          label: '组件交互文档'
        }]
      }],
      form: {},
      list: [],
      total: 0,
      loading: true
    }
  },
  computed: {
    columns() {
      const attrs = { 'min-width': '100px', align: 'left' }
      return [
        { label: '入库流水编号', prop: 'id', attrs },
        { label: '状态', prop: 'status', attrs },
        { label: '金额', prop: 'pageviews', formatter: 'money', attrs },
        { label: '客户名称', prop: 'author', attrs },
        { label: '订单渠道', headerSlot: 'orderLabel', prop: 'title', attrs: { width: '200px' }},
        { label: '时间', prop: 'display_time', attrs },
        { label: '操作', slot: 'handle', attrs: { width: '90px', fixed: 'right' }}
      ]
    },
    formItems() {
      const labelWidth = '85px'
      return [
        { type: 'input', label: '客户编码', prop: 'storeCode', span: 6, formItemAttrs: { labelWidth }},
        {
          type: 'select',
          label: '品牌',
          prop: 'brandId',
          options: this.brandList,
          formItemAttrs: { labelWidth },
          placeholder: '全部'
        },
        {
          type: 'cascader',
          label: '商品分类',
          prop: 'scanBarcode',
          attrs: {
          // clearable: true,
            options: this.treeList,
            props: {
              // label: 'name',
              // expandTrigger: 'click',
              // value: 'id',
              // children: 'categories',
              // multiple: false,
              // checkStrictly: true,
              // emitPath: false
            }
          }
        },
        { type: 'input', label: '商品编码', prop: 'skuCode', span: 6, formItemAttrs: { labelWidth }},
        {
          type: 'select',
          label: '商品品牌',
          prop: 'skuName',
          options: this.brandList,
          formItemAttrs: { labelWidth },
          attrs: {
            remote: true,
            placeholder: '请输入',
            filterable: true,
            clearable: true,
            remoteMethod: this.getBrandList
          }
        },
        {
          type: 'select',
          label: '是否有效扫码',
          prop: 'hasRebate',
          options: [
            { label: '全部', value: null },
            { label: '是', value: 1 },
            { label: '否', value: 0 }
          ],
          formItemAttrs: { labelWidth: '120px' }
        },
        {
          type: 'select',
          label: '是否激活优惠券',
          prop: 'hasCoupon',
          options: [
            { label: '全部', value: null },
            { label: '是', value: 1 },
            { label: '否', value: 0 }
          ],
          formItemAttrs: { labelWidth: '130px' }
        },
        {
          type: 'date',
          label: '时间',
          prop: 'dateRange',
          span: 8,
          attrs: {
            type: 'datetimerange'
          }
        }
      ]
    }
  },

  created() {
  },
  methods: {
    getBrandList() {
      setTimeout(() => {
        this.brandList = [
          { label: '马牌', value: 1 },
          { label: '普利司通', value: 2 },
          { label: '普利司通2', value: 3 }
        ]
      }, 1000)
    },

    gotoDetail(row, $index) {
      console.log('当前行数据：', row, $index)
    },

    getTableData({ pageNum, pageSize, ...formQuery }, done) {
      done({ data: [], total: 0 })
    }
  }
}
</script>

<style lang="scss" scoped>

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
